//文章列表
.media {
    border-bottom: 1px dashed $border-color;
    .article_img {
        width: 176px;
        height: 135px;
    }

    .article_title {
        color: $gray-800;
        position: relative;
        vertical-align: middle;
        overflow: hidden;
    }

    .article_excerpt {
        height: 2.8em;
        margin-bottom: 4.5em;
        overflow: hidden;
        position: relative;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: var(--gray);
    }

    .article_userinfo {
        width: 100%;
        position: absolute;
        bottom: -0.1875rem;
    }

    .article_author {
        color: $gray-900;
    }

    .read_number_style {
        color: var(--blue);
    }

    @include media-breakpoint-down(md) {
        .article_img {
            display: none;
        }
        .article_title {
            font-size: .875rem;
        }
        .article_excerpt {
            font-size: .75rem;
        }
    }
}

// 文章详情页
.article {
    margin-bottom: 1rem;
    color: $gray-800;

    .article-header {
        margin-bottom: 1.25rem;
        padding: .875rem 0;
        border-bottom: 1px solid $border-color;
        text-align: center;

        .article-meta {
            font-size: .875rem;
            color: var(--gray);
            .item {
                margin-right: 1.25rem;
            }
        }

        @include media-breakpoint-down(md) {
            .article-meta {
                font-size: .625rem;
                .item {
                    margin-right: 1rem;
                }
            }
        }
    }
    .article-footer {
        margin: 2rem 0;
        div:first-child {
            color: var(--gray);
        }
        .keywords {
            margin-top: 1rem;
            a {
                height: 1.625rem;
                line-height: 1.625rem;
                padding: 0 10px;
                margin-right: .625rem;
                background: $gray-100;
                border-radius: 3px;
                display: inline-block;
            }
        }
    }
}

//文章时间线
.articles-li {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    padding: 0 1.25rem;

    .articles-change {
        margin-top: 0;
        border-left: 1px solid $gray-200;
        padding: 1rem 0;
        position: relative;

        .articles-title {
            padding-left: 1.25rem;
            margin-top: 1.25rem;

            &:first-child {
                margin-top: 0;
            }

            &:before {
                content: "";
                background-color: $orange;
                width: .3125rem;
                height: .3125rem;
                border-radius: 50%;
                display: block;
                position: absolute;
                left: -0.1875rem;
                margin-top: .3125rem;
            }

            span {
                font-size: .75rem;
                color: var(--gray);
                margin-top: .625rem;
                display: block;
            }
        }
    }
}

